<? echo $html->css('wizard');	?>
<script>
	var act_step=1;	//actual step.
	
	$(document).ready(function(){

		$("#mainNav li").css("cursor","pointer");
		$("#mainNav li").click(function(){ do_jump(this);});
	});

	function do_jump(cual)
	{//make jump to click position
		var id= $(cual).attr("id").split("_");
		id=id[1];
		if(act_step>id)
		{//back jump
			for(i=act_step; i>id; i--)
				do_step(act_step,act_step-1);
		}
		else		
		{//forward jump
			for(i=act_step; i<id; i++)
				do_step(act_step,act_step+1);			
		}		
	}
	
	function do_step(divout,divin)
	{//make step
	
		var min_step=1;							//min step
		var max_step=$("#mainNav li").length;	//max step

		if(divin==max_step)
		{//Caso especial para el final 
			$("#step_" + divin).removeClass("mainNavNoBg");
			$("#step_" + divin).addClass("mainNavNoBg current");
		}
		
			
		if(divout>divin)
		{//retrocedemos
			if(act_step<=min_step) return 0;
			$("#step_" + divout).removeClass("current");
			$("#step_" + divout).addClass("");		
			$("#step_" + divin).removeClass("lastDone");
			$("#step_" + divin).addClass("current");			
			$("#step_" + (divin-1)).removeClass("done");
			$("#step_" + (divin-1)).addClass("lastDone");	
			act_step--;	
		}
		else
		{//avanzamos
			//alert("avanzamos:"+max_step+">="+act_step);
			if(act_step>=max_step) return 0;
			$("#step_" + divout).removeClass("current");
			$("#step_" + divout).addClass("lastDone");
			$("#step_" + divin).addClass("current");
			$("#step_" + (divout-1)).removeClass("lastDone");
			$("#step_" + (divout-1)).addClass("done");				
			act_step++;
		}
		$("." + divout).hide();
		$("." + divin).fadeIn("fast");		
		
		
	}
	

</script>


<div class="kt-g1">
	<div class="kt-md kt-md-content">	
		<div class="hd">
			 <h2><?php __('page_first_step') ?></h2>	
		</div>	
		<div class="bd">
		<div class="step_cont">
			<div class="1">
				<h3>1) Crear Base de Datos</h3>
				<div class="lst-form kt-md-group">
					<ul>
						<li>El primer paso es crear la Base de Datos de nuestro proyecto, puesto que es a partir de ella de donde se partir&aacute; para generar el c&oacute;digo de nuestra nueva aplicaci&oacute;n.</li>
						<li>La Base de Datos ha de seguir la nomenclatura propuesta por <b>CakePHP</b> para su elaboraci&oacute;n:
							<ul>
								<li>Los nombres de las tablas han de ir en plural y en min&uacute;sculas y se puede utilizar el guion bajo</li>
								<li>Para m&aacute;s informaci&oacute;n visitar la p&aacute;gina de <a href="http://book.cakephp.org/es/view/24/Model-and-Database-Conventions"><b>CakePHP</b></a></li>
							</ul>						
						</li>
						<li>Una vez creada la Base de Datos podemos pasar a generar el c&oacute;digo de nuestro nuevo Proyecto.</li>

					</ul>
				</div>
			</div>			
			<div class="2" style="display:none;">
				<h3>2) Crear Configuraci&oacute;n</h3>
				<div class="lst-form kt-md-group">
					<ul>
						<li>Hacemos login en nuestra aplicaci&oacute;n Atlas. Por defecto existe un usuario con login:"admin" y password:"admin".</li>
						<li>Accedemos a la opci&oacute;n <b>"Atlas generador>Configuraci&oacute;n"</b> y creamos una nueva <b>Configuraci&oacute;n</b>.</li>
						<li>La configuraci&oacute;n se compone de los siguientes elementos:
							<ul>
								<li><b>Nombre:</b> nombre de la configuraci&oacute;n que deseamos utilizar para trabajar con ella desde el Atlas</li>
								<li><b>Directorio:</b> directorio donde se guardar&aacute; fisicamente nuestro proyecto. <b>*PRECAUCION:</b> el contenido de este directorio ser&aacute; sobreescrito.</li>
								<li><b>Servidor:</b> Nombre del Servidor en el que estar&aacute; ubicado nuestro proyecto</li>
								<li><b>Base de Datos:</b> Nombre de la Base de datos que creamos en el <b>"Paso 1"</b></li>
								<li><b>Login:</b> nombre de usuario de la Base de datos.</li>
								<li><b>Clave:</b> clave del usuario de la Base de datos.</li>
							</ul>							
						</li>
						<li>Guardamos la configuraci&oacute;n.</li>
						<li>Seleccionamos la configuraci&oacute;n que acabamos de crear.</li>
						<li>Una vez seleccionada la configuraci&oacute;n de nuestro nuevo proyecto podemos pasar al siguiente paso.</li>					
					</ul>
				</div>
			</div>
			<div class="3" style="display:none;">
				<h3>3) Crear Proyecto</h3>
				<div class="lst-form kt-md-group">
					<ul>
						<li>En este paso crearemos fisicamente nuestro proyecto.</li>
						<li>Por defecto <b>CakePHP</b> nos ofrece el directorio <b>app</b> para situar nuestro c&oacute;digo. Si deseamos que sea otro diferente podemos escribir un nombre en el campo que hay a tal efecto, en caso de querer trabajar con el directorio por defecto <b>"app"</b> dejar el campo en blanco.</li>
						<li>Guardamos el proyecto.</li>
						<li>Una vez guardado podemos ver que en el directorio que configuramos en el <b>"Paso 2"</b> se ha generado la estructura de directorios y ficheros b&aacute;sicas de <b>CakePHP</b>. </li>
						<li>Pasemos al siguiente paso.</li>
					<ul>
				</div>
			</div>		
			
			<div class="4" style="display:none;">
				<h3>4) Crear Modelo</h3>
				<div class="lst-form kt-md-group">
					<ul>
						<li><b>CakePHP</b> es un FrameWork basado en la metodolog&iacute;a <b>Modelo-Vista-Controlador</b>.</li>
						<li>El primer paso es crear el <b>Modelo de Datos</b> partiendo de las tablas de nuestra Base de Datos.</li>
						<li>Accedemos a la opci&oacute;n <b>"Atlas generador>Modelos"</b>. Si la configuraci&oacute;n es correcta aparecer&aacute;n las tablas de la Base de Datos de nuestro Proyecto. </li>
						<li>Seleccionamos aquella tabla de la que deseamos generar el modelo. </li>
						<li>Una vez seleccionada la tabla aparecen las diferentes opciones para el modelado de datos:
							<ul>
								<li><b>Validar Campos</b>: nos permitir&aacute; dar formato a nuestros datos pudiendo elegir entre un amplio abanico.</li>
								<li><b>Has Many</b>: para relaciones de "Uno a Muchos". </li>
								<li><b>Has One</b>: parar relaciones de "Uno a Uno".</li>
								<li><b>Belongs To</b>: para relaciones de "Muchos a Uno".</li>		
								<li><b>Has and Belongs To Many</b>: para relaciones de "Muchos a Muchos".</li>				
							</ul>
						</li>
						<li>Este paso lo repetiremos para todas aquellas tablas de las que deseemos generar un Modelo.</li>
					</ul>
				</div>
			</div>		
			<div class="5" style="display:none;">
				<h3>5) Crear Controladores</h3>
				<div class="lst-form kt-md-group">
					<ul>
						<li>Una vez creado los Modelos pasamos a crear los Controladores.</li>
						<li>Los Controladores contienen el Negocio de la aplicaci&oacute;n.</li>
						<li>Accedemos a la Opci&oacute;n <b>"Atlas generador>Controlador"</b>.</li>
						<li>Como en el cado del Modelo aparecer&aacute; una lista con las tablas de nuestra Base de Datos.</li>
						<li>Seleccionamos aquella tabla de la que queramos generar el controlador y de la que previamente hallamos generado su Modelo correspondiente.</li>
						<li>Una vez seleccionada apareceran diferentes acciones que podr&aacute; llevar acabo nuestro controlador:
							<ul>
								<li><b>Funcion index o principal (listado)</b>: genera el c&oacute;digo necesario para crear un listado con los elementos de la tabla.</li>
								<li><b>Funci&oacute;n ver</b>: genera el c&oacute;digo para mostrar la informaci&oacute;n de un elemento.</li>
								<li><b>Funci&oacute;n Borrar</b>: genera el c&oacute;digo para borrar un elemento.</li>
								<li><b>Funci&oacute;n a&ntilde;adir o add</b>: genera el c&oacute;digo para generar una insercci&oacute;n.</li>
								<li><b>Funci&oacute;n Editar</b>: genera el c&oacute;digo para modificar un elemento.</li>
								<li><b>Funciones para el Administrador</b>: puede que deseemos generar estos mismos controladores para el administrador de nuestro futuro proyecto y q estos sean independientes de los utilizados por el resto de usuarios. Estas acciones generaran el c&oacute;digo para estas tareas.</li>
								<li><b>Helpers</b>: Desde aqu&iacute; podemos indicar que "helpers" queremos incluir en nuestro controlador. </li>
								<li><b>Components</b>: Nos permite a&ntilde;adir "components" a nuestro controlador. </li>					
							</ul>
						</li>
						<li>Una vez seleccionadas las acciones que nos interesen pulsamos sobre el bot&oacute;n "generar" creando el c&oacute;digo necesario para nuestro controlador. </li>
						<li>Esta operaci&oacute;n la repetiremos para todos aquellos controladores que deseemos crear.</li>
					</ul>
				</div>
			</div>
			<div class="6" style="display:none;">
				<h3>6) Crear Vistas</h3>
				<div class="lst-form kt-md-group">
					<ul>
						<li>En este punto tenemos creado el Modelo de Datos de Nuestra aplicaci&oacute;n asi como el Negocio de la misma. Para finalizar hemos de generar las "Vistas" que nos permitiran la visualizaci&oacute;n de la informaci&oacute;n.</li>
						<li>Seleccionamos la <b>Opci&oacute;n "Atlas generador>Vistas"</b>. </li>
						<li>Como en los pasos anteriores seleccionamos aquella tabla de la que queramos generar la vista y de la que previamento hemos creado su Modelo y Controlador.</li>
						<li>Seleccionamos las vistas que queramos y pulsamos en generar.</li>
						<li>Con esto, habr&iacute;amos generado todo el c&oacute;digo necesrio para tener un proyecto totalmente funcional y operativo.</li>
						<li>Para verlo funcionar tan solo debemos mover el direcorio de nuestro proyecto al "host" que pusimos en la configuraci&oacute;n inicial en el caso que esto fuese necesario.</li>
						<li>Una vez hecho esto podremos acceder a la siguiente URL para ver el resultado final "host/nombre_controlador/accion/parametros".</li>
						<li>Por ejemplo si quisiesemos ver el listado de una tabla llamada usuarios escribiriamos la siguiente URL: "localhost/usuarios/index".</li>
					</ul>
				</div>
			</div>				
		</div>		
		
		
			<div class="buttons">
			      <button type="submit" class="previous boton" 	onclick="do_step(act_step,act_step-1);  "> Back </button>
			      <button type="submit" class="next boton" 		onclick="do_step(act_step,act_step+1);  "> Next  </button>
			</div>		
		</div>
		<div class="ft">
		    <ul id="mainNav" class="fiveStep"> 
		      <li id="step_1" class="current"><a title=""><em>1) Base de Datos</em><span>Crear la Base de Datos de nuestro Proyecto</span></a></li>
		      <li id="step_2"><a title=""><em>2) Configuracion</em><span>Crear configuracion para el nuevo Proyecto...</span></a></li>
		      <li id="step_3"><a title=""><em>3) Proyecto</em><span>Creamos el Nuevo Proyecto</span></a></li>
		      <li id="step_4"><a title=""><em>4) Modelos</em><span>Generamos el Modelo ...</span></a></li>
		      <li id="step_5"><a title=""><em>5) Controladores</em><span>Generamos los controladores ...</span></a></li>
		      <li id="step_6" class="mainNavNoBg"><a title=""><em>6) Vistas</em> <span>Generamos las vistas para los controladores ...</span></a></li>
		    </ul>		
		</div>

		
	
	</div>
</div>
